<template>
  <div class="bg-white page-content padding-20">
    <div class="flex items-center">
      App状态筛选:
      <q-tabs
        class="tab-read margin-l-10"
        v-model="type"
        shrink stretch dense
        inline-label
        align="left"
        active-color="primary"
        indicator-color="primary"
      >
        <q-tab name="" label="全部"/>
        <q-tab name="2" label="近7天"/>
        <q-tab name="3" label="近30天"/>
        <q-tab name="4" label="已到期"/>
      </q-tabs>
    </div>
    <q-table :data="tableData"
             :columns="columns"
             row-key="id"
             :loading="isTableLoading"
             :hide-bottom="!!tableData.length"
             :pagination.sync="pagination"
             style="margin: 20px 0 0 0"
             class="myTable scroll"
             color="primary">
      <template v-slot:body-cell-name="props">
        <q-td>
          {{appNameObj[props.row.id].desc}}
        </q-td>
      </template>
      <template v-slot:body-cell-status="props">
        <q-td>
          {{statusObj[props.row.status]}}
        </q-td>
      </template>
      <template v-slot:body-cell-operations="props">
        <q-td
          class="operations"
          style="width: 100px"
        >
          <div class="btn-group text-center">
            <q-btn
              flat dense
              color="primary"
              @click="goApp(props.row.id)"
            >
              进入应用
            </q-btn>
          </div>
        </q-td>
      </template>
    </q-table>
  </div>
</template>

<script>
import { getApplications } from '../../boot/home/home-new'
import { menuListData } from '../../assets/js/menu-list'

export default {
  data () {
    return {
      type: '',
      appNameObj: {},
      menuObj: {},
      statusObj: {
        '0': '未知',
        '1': '运行中',
        '2': '近7天内到期',
        '3': '近30天内到期',
        '4': '已到期'
      },
      showWhiteList: [0, 9, 77, 107],
      tableData: [], // 列表数据源
      columns: [
        { name: 'name', label: 'App名称', align: 'left', field: 'name' },
        { name: 'status', label: 'App状态', field: 'status', align: 'left' },
        { name: 'startDate', label: '购买时间', field: 'startDate', align: 'left' },
        { name: 'endDate', label: '到期时间', field: 'endDate', align: 'left' },
        { name: 'lastRenewal', label: '上次续费', field: 'lastRenewal', align: 'left' },
        { name: 'operations', label: '操作', align: 'center', field: 'operations' }
      ],
      isTableLoading: false,
      pagination: {
        rowsPerPage: 0
      }
    }
  },
  created () {
    this.getAppName()
    this.getApplications()
  },
  watch: {
    type () {
      this.getApplications()
    }
  },
  methods: {
    getApplications () {
      this.isTableLoading = true
      this.tableData = []
      getApplications({ applicationStatus: this.type })
        .then(res => {
          this.tableData = res.data.filter(item => {
            return !this.showWhiteList.includes(item.id)
          })
          this.isTableLoading = false
        })
        .finally(() => {
          this.isTableLoading = false
        })
    },
    getAppName () {
      const obj = {}
      const menuObj = {}
      Object.entries(this.Enums.SYS_PERMISSION).forEach(item => {
        const info = item[1]
        if (info.type === 'MENU_LEVEL_ONE') {
          obj[info.value] = { desc: info.desc, name: info.name }
        }
      })
      menuListData.forEach(item => {
        menuObj[item.desc] = item.children?.length > 0 ? item.children[0].link : '/'
      })
      this.menuObj = menuObj
      this.appNameObj = obj
    },
    // 进入应用
    goApp (id) {
      const desc = this.appNameObj[id].name
      const link = this.menuObj[desc]
      this.$router.push({ path: link })
    }
  }
}
</script>

<style scoped lang="scss">

.tab-read /deep/.q-tab{
  margin: 0!important;
  min-height: 32px!important;
  height: 32px;
  border-right: 1px solid #d3d3d3;
  color: #999999!important;
}
.tab-read /deep/.q-tabs__content{
  border: 1px solid #d3d3d3;
  border-right: none;
  border-radius: 6px;
  overflow: hidden;
}
.tab-read /deep/.q-tab--active{
  background: #5F77FD;
  color: #ffffff!important;
}
</style>
